<template>
    <div class="box">
        <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group> -->
        <el-menu router :default-active="active" class="el-menu-vertical-demo" :collapse="this.$store.state.isCollapse"
            background-color="#304156" text-color="#fff">
            <h2
                style="padding-left:10px;background-color:#2B2F3A; color: #fff; font-size: 14px; line-height:50px; height:50px; text-align: center;">
                <img :class='imgClass' src="@/assets/img/logo.png" alt=""
                    style="width:45px;height:36px;vertical-align:middle;"> 考试管理系统
            </h2>
            <el-menu-item index="/examIndex" route="/examIndex"  @click="leftClick(a={src:'/examIndex',t2:'首页' })">
                <i class="el-icon-s-home"></i>
                <span slot="title">主页</span>
            </el-menu-item>
            <el-submenu v-for="item, index in navList" :index="item.src" :key="item.id">
                <template slot="title">
                    <i :class="item.tIcon"></i>
                    <span slot="title">{{ item.t1 }}</span>
                </template>
                <el-menu-item-group> <!--(index + 2) + '-' + (b + 1)+''-->
                    <el-menu-item  v-for="a, b in item.t2List" :index="a.src" :key="b"   @click="leftClick(a)">{{ a.t2
                    }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>
<script>
import { EvnetBus } from '@/eventBus/index';
// 修改bug
export default {
    data() {
        return {
            active: this.$route.path == '/' ? '/examIndex' : this.$route.path,
            imgClass: '',
            pathList: [],
            navList: [
                {
                    id: "01",
                    t1: "用户管理",
                    tIcon: "el-icon-s-custom",
                    src: "/user",
                    t2List: [
                        {
                            t2: "学生列表",
                            src: "/user/student/list"
                        }, {
                            t2: "管理员列表",
                            src: "/user/admin/list"
                        }
                    ]
                },
                {
                    id: "02",
                    t1: "卷题管理",
                    tIcon: "el-icon-s-order",
                    src: "/exam",
                    t2List: [
                        {
                            t2: "试卷列表",
                            src: "/exam/paper/list"
                        }, {
                            t2: "题目列表",
                            src: "/exam/question/list"
                        }
                    ]
                },
                {
                    id: "03",
                    t1: "任务管理",
                    tIcon: "el-icon-menu",
                    src: "/task",
                    t2List: [
                        {
                            t2: "任务列表",
                            src: "/task/list"
                        }, {
                            t2: "任务创建",
                            src: "/task/edit"
                        }
                    ]
                },
                {
                    id:"07",
                    t1: "教育管理",
                    tIcon: "el-icon-s-opportunity",
                    src:"/education",
                    t2List: [
                        {
                            src: "/education/subject",
                            t2: "学科列表"
                        },
                    ]
                },
                {
                    id: "05",
                    t1: "成绩管理",
                    tIcon: "el-icon-s-release",
                    src: "/answer",
                    t2List: [
                        {
                            src: "/answer/list",
                            t2: "答卷列表"
                        }
                    ]
                },
                {
                    id:"06",
                    t1: "消息中心",
                    tIcon: "el-icon-s-comment",
                    src: "/message",
                    t2List: [
                        {
                            src: "/message/list",
                            t2: "消息列表"
                        }, {
                            src: "/message/send",
                            t2: "消息发送"
                        }
                    ]
                }, {
                    id:"08",
                    t1: "日志中心",
                    tIcon: "el-icon-s-release",
                    src: "/journal",
                    t2List: [
                        {
                            src: "/journal/list",
                            t2: "用户日志"
                        }
                    ]
                }

            ]
        };
    },
    methods: {
        // 左侧导航点击与veux控制右边的面包屑
        leftClick(el){
            console.log(this.$store.state.editableTabsValue);
            console.log(this.$store.state.editableTabs);
            let obj = this.$store.state.editableTabs.find(item=>item.title==el.t2);
            let index = obj.name;
            this.$store.commit('leftClickChange',index);
        },
    },
    created(){
        
    },
    mounted() {
        this.active = sessionStorage.getItem('route');
        EvnetBus.$on("imgA", () => {
            this.imgClass = 'animate';
            var that = this;
            setTimeout(function () {
                that.imgClass = '';
            }, 500)
        })
        EvnetBus.$on("routeChange",(to)=>{
            this.active=to.path
        })
    }
}
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo {
    height: inherit;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.box {
    height: 100%;
}

.animate {
    animation: imgA 0.5s infinite;

}

@keyframes imgA {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
</style>